<template>
  <div class="easyd-weixin-Box">

    <mt-datetime-picker
      ref="picker"
      type="date"
      v-model="pickerValue">
    </mt-datetime-picker>

    <div class="inventoryRecordSearchBox">
      <div class="inventoryRecordSearchInput">
        <i class="fa fa-search fa-lg"></i>
        <input type="text" placeholder="请输入要搜索的商品名称">
      </div>
      <div class="inventoryRecordSearchBtn">取消</div>
    </div>
    <div class="inventoryRecordInfo">
      <div class="inventoryRecordContent">本月新增库存：200个，减少库存：100个</div>
      <div class="inventoryRecordSelectDate" @click="selectDate">选择日期</div>
    </div>
    <div class="shopInventoryRecordBox">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      >
        <div class="shopInventoryRecordItem">
          <div class="shopInventoryRecordItemImage">
            <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery>
          </div>
          <div class="shopInventoryRecordItemName">我是商品名称</div>
          <div class="shopInventoryRecordItemDate">当前库存量：99</div>
          <div class="shopInventoryRecordItemDate">2012/12/12 12:12</div>
          <div class="shopInventoryRecordSituation">库存
            <span style="color:green">+2</span>
          </div>
        </div>

        <div class="shopInventoryRecordItem" v-for="i in 10">
          <div class="shopInventoryRecordItemImage">
            <img :src="imageDemoUrl" v-lazy="imageDemoUrl" v-gallery>
          </div>
          <div class="shopInventoryRecordItemName">我是商品名称</div>
          <div class="shopInventoryRecordItemDate">当前库存量：99</div>
          <div class="shopInventoryRecordItemDate">2012/12/12 12:12</div>
          <div class="shopInventoryRecordSituation">库存
            <span style="color:red">-2</span>
          </div>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerValue : '',
      allLoaded: false,
      imageDemoUrl:
        "http://testfileupload.oss-cn-beijing.aliyuncs.com/shangpin1.jpg"
    };
  },
  methods: {
    selectDate(){
      this.$refs.picker.open();
    },
    loadTop() {
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded();
      }, 2000);
    },
    loadBottom() {
      setTimeout(() => {
        this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded();
      }, 5000);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'
.shopInventoryRecordBox {
  position: absolute;
  top: 90px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding-top: 15px;
  overflow auto
  padding-left: 15px;
  padding-right: 15px;

  .shopInventoryRecordItem {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 15px;
    $itemStyle()

    .shopInventoryRecordItemImage {
      width: 90px;
      height: 60px;
      float: left;
      background: red;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      }
    }

    .shopInventoryRecordItemName {
      width: 220px;
      height: 15px;
      font-weight: 500;
      float: left;
    }

    .shopInventoryRecordItemDate {
      width: 220px;
      height: 15px;
      margin-top: 7px;
      font-size: 12px;
      float: left;
    }

    .shopInventoryRecordSituation {
      width: 100%;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      float: left;

      span {
        font-size: 18px;
        color: green;
      }
    }
  }
}

.inventoryRecordInfo {
  width: 100%;
  height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  background #fff
  box-sizing: border-box;
  box-shadow: 0px 20px 50px #eee;

  .inventoryRecordContent {
    position: absolute;
    right: 80px;
    line-height: 40px;
    left: 15px;
    top: 0px;
    bottom: 0px;
  }

  .inventoryRecordSelectDate {
    width: 80px;
    height: 40px;
    line-height: 40px;
    float: right;
    text-align: right;
    color: orange;
  }
}

.inventoryRecordSearchBox {
  width: 100%;
  height: 50px;
  background: #eee;
  position: relative;

  .inventoryRecordSearchInput {
    position: absolute;
    right: 60px;
    left: 0px;
    top: 0px;
    bottom: 0px;

    i {
      position: absolute;
      left: 15px;
      top: 19px;
      color: #999;
      font-size: 14px;
    }

    input {
      width: 96%;
      height: 35px;
      margin-top: 7px;
      border-radius: 5px;
      border: 1px solid #eee;
      margin-left: 2%;
      outline: none;
      padding: 10px;
      padding-left: 30px;
      box-sizing: border-box;
      -webkit-appearance: none;
      background: #fff;
    }
  }

  .inventoryRecordSearchBtn {
    width: 60px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    float: right;
  }
}
</style>

